<template>
  <div style="height:100vh;">
    <div class="search">
      <div class="search-header">
        <n-icon size="20">
          <game-icon></game-icon>
        </n-icon>
        <div class="search-input">
          <n-input @update:value="update"></n-input>
        </div>
        <n-icon size="20" @click="close">
          <game-icon></game-icon>
        </n-icon>
      </div>
      <div class="search-content">
        <div class="search-total" v-show="searchList.length != 0">{{searchList.length}} results found</div>
        <ul class="search-list" v-for="(item, index) in searchList" :key="index">
          <li class="search-list-item">
            <div>
              <h4>{{item.title}}</h4>
              <p>{{item.content}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { NIcon, NInput } from 'naive-ui'
import { GameControllerOutline as GameIcon } from '@vicons/ionicons5'
import { ref, defineEmits } from 'vue'

const emit = defineEmits(['close'])

type SearchList = {
  title: string,
  content: string
}
const searchList = ref<SearchList[]>([])

const cursearchList = ref<SearchList[]>([
  { title: 'abc', content: 'c risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis...' },
  { title: 'aaa', content: 'ng engines for displaying Math Equations: MathJax and KaTeX. MathJax is a JavaScript display engine' },
  { title: 'sss', content: 'vis CI. Deploy Key has the advantage of high security, while Access Token has the advantage of being' }
])
const update = (value) => {
  if (value) {
    let list = cursearchList.value.filter(item => {
      return item.title.includes(value)
    })
    searchList.value = list
  } else {
    searchList.value = []
  }
}

const close = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.search {
  border-radius: 3px;
  width: 100vw;
  height: 100vh;
  background-color: var(--theme-content-color);
}

.search-header {
  display: flex;
  align-items: center;

  .search-input {
    flex: 1
  }
}

.n-icon {
  margin: 10px;
}

::v-deep .n-input .n-input__border,
.n-input .n-input__state-border {
  border: none;

  &:focus-visible {
    outline: none;
  }
}

.search-content {
  width: 100%;
  height: 100%;
  background-color: var(--theme-bg);
  padding: 5px 20px;

  .search-total {
    padding-bottom: 5px;
    border-bottom: 2px dashed #000;
  }

  .search-list {
    margin: 5px 0;

    li {
      list-style: outside;
      margin-bottom: 10px;

      h4 {
        display: inline-block;
        border-bottom: 1px solid #000;
        line-height: 1;
      }
      p {
        overflow-wrap: break-word;
        cursor: pointer;
        line-height: 2;
        border-bottom: 1px dashed  #000;
      }
    }
  }
}
@media (min-width: 1200px) {
  .search {
    width: 700px;
  }

}
</style>